<template>
	<!-- 这是图表模板 -->
	<view style="position: relative; width: 100%; height: 100%;">
		<echarts-type :canvasId="canvasId" :lazyLoad="lazyLoad" :option="option" />
	</view>
</template>

<script>
import echartsType from '@/mpvue-echarts/src/echarts-type.vue';
export default {
	data() {
		return {
			option: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '15%',
					right: '10%',
					top: '15%',
					bottom: '20%'
				},
				xAxis: [
					{
						type: 'category',
						data: ['仓山', '福清', '高新', '鼓楼', '马尾', '连江', '台江'],
						axisLine: {
							show: true,
							lineStyle: {
								color: '#BCCEDE'
							}
						},
						axisLabel: {
							formatter: 'function() { [native code] }',
							color: '#999999',
							interval: 0,
							textStyle: {
								fontSize: 12
							}
						}
					}
				],
				yAxis: [
					{
						min: 0,
						minInterval: 1,
						axisLabel: {
							formatter: '{value}',
							color: '#999999',
							textStyle: {
								fontSize: 12
							}
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(255,255,255,1)'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(188, 206, 222, 0.3)',
								type: 'dashed'
							}
						},
						axisTick: {
							show: false,
							lineStyle: {
								color: 'rgba(255,255,255,1)'
							}
						}
					}
				],
				dataZoom: {
					type: 'inside',
					start: 0,
					end: 60
				},
				series: [
					{
						name: '高企总数',
						type: 'bar',
						label: {
							show: true,
							position: 'top',
							color: '#0088FF',
							fontSize: 14
						},
						animationDuration: 5000,
						data: ['3', '2', '4', '9', '4', '2', '1'],
						barWidth: 6,
						yAxisIndex: 0,
						itemStyle: {
							normal: {
								barBorderRadius: [30, 30, 30, 30],
								color: {
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									type: 'linear',
									global: false,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(0, 217, 243, 1)'
										},
										{
											offset: 1,
											color: 'rgba(0, 136, 255, 1)'
										}
									]
								}
							}
						}
					}
				]
			}
		};
	},
	props: {
		canvasId: {
			type: String,
			default: 'ec-canvas'
		},
		lazyLoad: {
			type: Boolean,
			default: false
		},
		disableTouch: {
			type: Boolean,
			default: false
		},
		throttleTouch: {
			type: Boolean,
			default: false
		}
	},
	components: {
		echartsType
	},
	methods: {}
};
</script>
